{extend name="public/common"}
{block name="body"}
</head>
<style type="text/css">
	.bg-1 {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
}
.radius:hover{
 	color: #fff;
	border-color: #66b1ff;
	background-color: #66b1ff;
 }
 span:hover{
 	color: #333;
 }
  .btn-primary {
    color: #fff;
    background-color: #5a98de;
    border-color: #5a98de;
    height: 31px;
    border-radius: 5px;
    font-size: 14px;
    line-height: 24px !important;
}
</style>
<body>
<nav class="breadcrumb">
    <i class="Hui-iconfont">&#xe67f;</i>
    系统管理
    <span class="c-gray en">&gt;</span>
    APP管理
    <span class="c-gray en">&gt;</span>
    广告管理
    <a class="btn btn-success radius r"
       style="line-height: 1.6em; margin-top: 3px"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="Hui-iconfont">&#xe68f;</i>
    </a>
</nav>

<div style="padding:20px;height:30px;">
  	
  	<div class="new_box">
<div class="page-container">
    <div id="tab-system" class="form HuiTab">
        <div class="row cl">
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2">图片列表：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <ul>
                        {foreach name="list" item="v" key="k" }
                            <li style="float: left;"><img style="height: 100px;" src="../../{$v}"><i class="Hui-iconfont" onclick="removeImg('{$k}',this)"></i></li>
                        {/foreach}
                    </ul>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2">上传图片：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <div id="preview5" style="margin-left:150px;clear:both; padding-top:15px;">
                        <img src="" alt="" id="imghead5" height="200" width="200" style="display:none;"/>
                    </div>
                    <div class="yanzRight">
                        <form action="{:url('Mobile/addAdvert')}" class="form form-horizontal" enctype="multipart/form-data" id="form-admin-add" method="post">
                            <input style="margin-top:5px;float: left;" name="file" onchange="previewImage(this,5)" type="file"/>
                            <div class="am-margin" style="margin-top:60px;">
                                <input type="submit" style="margin-left:240px;" class="btn btn-primary radius" value="确认添加" />
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</div>
{/block} {block name="js"}
<script type="text/javascript">
    //图片预览功能
    function previewImage(file,imgNum){
        var MAXWIDTH  = 200;
        var MAXHEIGHT = 200;
        var div = document.getElementById('preview'+imgNum);
        if (file.files && file.files[0])
        {
            div.innerHTML ='<img id=imghead'+imgNum+'>';
            var img = document.getElementById('imghead'+imgNum+'');
            img.onload = function(){
                var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
                img.width  =  rect.width;
                img.height =  rect.height;
                img.style.marginTop = rect.top+'px';
            };
            var reader = new FileReader();
            reader.onload = function(evt){img.src = evt.target.result;}
            reader.readAsDataURL(file.files[0]);
        }else{
            var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
            file.select();
            var src = document.selection.createRange().text;
            div.innerHTML = '<img id=imghead'+imgNum+'>';
            var img = document.getElementById('imghead2');
            img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
            var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
            status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
            div.innerHTML = "<div id=divhead"+imgNum+" style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
        }
    }
    function clacImgZoomParam( maxWidth, maxHeight, width, height ){
        var param = {top:0, left:0, width:width, height:height};
        if( width>maxWidth || height>maxHeight ){
            rateWidth = width / maxWidth;
            rateHeight = height / maxHeight;

            if( rateWidth > rateHeight )
            {
                param.width =  maxWidth;
                param.height = Math.round(height / rateWidth);
            }else
            {
                param.width = Math.round(width / rateHeight);
                param.height = maxHeight;
            }
        }
        param.left = Math.round((maxWidth - param.width) / 2);
        param.top = Math.round((maxHeight - param.height) / 2);
        return param;
    }
    $("#form-admin-add").submit(function(){
        var file = $('input[name="file"]').val();
        if( !file ){
            layer.msg('请上传图片', {icon: 5});
            return false;
        }
        if (!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(file)) {
            layer.msg('图片类型必须是.gif,jpeg,jpg,png中的一种', {icon: 5});
            return false;
        }
    })
    function removeImg(url,obj){
        layer.confirm('确定删除图片？', {
            btn: ['是','否'] //按钮
        }, function(){
            $.post(
                '/admin/mobile/delAdvice',
                {file:url},
                function(data){
                    if(data.code == 1){
                        layer.msg("删除成功", {icon: 1});
                        $(obj).parent().remove();
                    }else{
                        layer.msg("删除失败", {icon: 5});
                    }
                },'json'
            );

        });
    }
</script>
{/block}